.dashboard {
    background: url(https://img.js.design/assets/img/622fff48f7f4d261f804e2e4.png);
}

.navbar {
    width: calc(100% - 104px); /* 1820px - 52px * 2 */
    max-width: 1820px;
    height: 52px;
    border-radius: 10px;
    background-color: rgba(223, 225, 233, 0.3);
    display: flex;
    align-items: center;
    margin: 0 52px; 
    overflow: hidden;
}
.navbar-item {
    width: 136px;
    height: 52px;
    border-radius: 10px;
    color: rgba(51, 51, 51, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.3s;
}
.navbar-item:hover {
    background-color: #86bbe7;
}
.navbar-item.selected {
    background-color: #ffffff; 
    color: rgba(0, 185, 155, 1);
}
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .navbar-item {
        width: auto; /* 自适应宽度 */
        flex: 1 1 100px; /* 最小宽度100px */
        text-align: center;
    }
}
 .centerof {
          display: flex;
          justify-content: space-between;
          width: calc(100% - 104px); /* 52px * 2 */
          max-width: 1795px; 
          margin: 26px 52px 0 52px; 
      }
      .box1 {
          width: 1119px;
          height: 987px;
          background: linear-gradient(180deg, rgba(253, 232, 179, 1) 20%, rgb(247, 248, 248) 80%);
          margin-right: 24px; /* 盒子间距 */
      }
      .imgavatar {
        width: 271px;
        height: 300px;
        // border: 1px solid red;
        // margin: 207px 0 0 421px;
        margin-top: calc(10px + 15vh);
        margin-left: calc(10px + 18vw);
      }
      .img {
        width: 250px;
        height: 250px;
        margin-left: 10px;
        border-radius: 50%;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
      }
      .img-zi {
        width: 350px;
        // border: 1px solid red;
        color: rgba(0, 0, 0, 1);
        text-align: center;
        font-weight: 400;
        line-height: 40px;
        font-size: 30px;
        height: 40px;
        // text-align: center;
        margin-left: -20px;
      }
      .box2 {
          width: 676px;
          height: 987px;
          background: linear-gradient(180deg, rgba(253, 232, 179, 1) 20%, rgb(247, 248, 248) 80%);
      }
      @media (max-width: 1200px) {
          .centerof {
              flex-direction: column;
              align-items: center;
          }
          .box1, .box2 {
              width: 100%;
              margin: 0;
              margin-bottom: 24px;
          }
          .box1 {
              margin-bottom: 24px;
          }
      }

// 按钮
.btnboxcan {
    display: flex; 
    flex-wrap: wrap; 
    margin-top: 120px;
    // border: 1px solid red;
    margin-top: 100px; 
    margin-left: 30px;
  }
  .btnbox {
    width: 198px; 
    height: 52px; 
    border-radius: 10px;
    background-color: rgba(0, 185, 155, 1);
    margin: 22px 18.5px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-size: 16px; 
  }

  .title {
    left: 24.75px;
    margin-top: calc(10px + 2vh);
    margin-left: calc(10px + 1vw);
    top: 19px;
    width: 150px;
height: 44px;
opacity: 1;

font-size: 30px;
font-weight: 400;
letter-spacing: 0px;
line-height: 43.44px;
color: rgba(51, 51, 51, 1);
text-align: left;
vertical-align: top;
  }

.redorplus {
    // width: 200px;
    // height: 300px;
    // border: 1px solid red;
    // background: #996e6e;
    
    width: 198px; 
    height: 52px; 
    border-radius: 10px;
    background-color: rgba(0, 185, 155, 1);
    margin: 22px 50px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: rgb(10, 8, 8); 
    font-size: 16px; 
}